<template>
	<view class="chartsBox">
		<view class="chartsTitle">
			<h4>数据趋势</h4>
		</view>


		<uni-data-select :clear="false" class="uniDataSelect" v-model="selectValue" :localdata="selectRange"
			@change="selectChange"></uni-data-select>


		<view class="chartsMain">
			<view class="charts-box">
				<qiun-data-charts type="mix" :opts="opts" :chartData="chartData" ref="chartRef" />
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		reactive
	} from 'vue';
	import {
		cemBusinessBudgetGetYears,
		phoneStaGetStaffDataTrend
	} from '../../../utils/data';

	import {
		onShow
	} from '@dcloudio/uni-app'

	//====================下拉框========================//
	let selectValue = ref(2025)
	let selectRange = ref([{
			value: 2025,
			text: "2025"
		},
		{
			value: 2024,
			text: "2024"
		},
		{
			value: 2023,
			text: "2023"
		},
	])

	let selectChange = (e) => {
		getServerData()
	}

	let getYears = () => {
		//获取登录账号的businessId
		let userinfo = JSON.parse(uni.getStorageSync('userinfo'))
		let businessId = userinfo.businessId

		cemBusinessBudgetGetYears('/cemBusinessBudget/getYears', {
			businessId: businessId
		}).then((res) => {
			if (res.code == 200) {
				selectRange.value = []
				for (var i = 0; i < res.data.length; i++) {
					selectRange.value.push({
						value: res.data[i],
						text: res.data[i],
					})

				}
				if (selectRange.value.length > 0) {

					// 创建一个表示当前时间的Date对象
					const currentDate = new Date();
					// 获取当前年份（四位数）
					const currentYear = currentDate.getFullYear();

					selectValue.value = currentYear
				} else {
					selectValue.value = ''
				}

			}
		})
	}
	getYears()


	// =============================获取图表实例============================//
	const chartRef = ref(null)

	let chartData = ref({
		categories: [],
		series: []
	});

	let opts = reactive({
		timing: "easeOut",
		duration: 1000,
		rotate: false,
		rotateLock: false,
		color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
		padding: [0, 0, 0, 20],
		fontSize: 9,
		fontColor: "#666666",
		dataLabel: true,
		dataPointShape: true,
		dataPointShapeType: "solid",
		touchMoveLimit: 60,
		enableScroll: false,
		enableMarkLine: false,
		legend: {
			show: true,
			position: "top",
			float: "right",
			padding: 5,
			margin: 5,
			backgroundColor: "rgba(0,0,0,0)",
			borderColor: "rgba(0,0,0,0)",
			borderWidth: 0,
			fontSize: 13,
			fontColor: "#666666",
			lineHeight: 11,
			hiddenColor: "#CECECE",
			itemGap: 10
		},
		xAxis: {
			disableGrid: true,
			disabled: false,
			axisLine: true,
			axisLineColor: "#CCCCCC",
			calibration: false,
			fontColor: "#666666",
			fontSize: 9,
			lineHeight: 20,
			marginTop: 10,
			rotateLabel: true,
			rotateAngle: 45,
			itemCount: 5,
			boundaryGap: "center",
			splitNumber: 5,
			gridColor: "#CCCCCC",
			gridType: "solid",
			dashLength: 4,
			gridEval: 1,
			scrollShow: false,
			scrollAlign: "left",
			scrollColor: "#A6A6A6",
			scrollBackgroundColor: "#EFEBEF",
			title: "",
			titleFontSize: 13,
			titleOffsetY: 0,
			titleOffsetX: 0,
			titleFontColor: "#666666",
			format: ""
		},
		yAxis: {
			disabled: true,
			disableGrid: false,
			splitNumber: 5,
			gridType: "dash",
			dashLength: 4,
			gridColor: "#CCCCCC",
			padding: 10,
			showTitle: true,
			data: [{
					position: "left",
					title: "折线",
					axisLine: false
				},
				{
					position: "right",
					min: 0,
					max: 200,
					title: "柱状图",
					textAlign: "left",
					axisLine: false
				},

			]
		},
		extra: {
			mix: {
				column: {
					width: 12,
					seriesGap: 2,
					barBorderCircle: false,
					linearType: "none",
					linearOpacity: 1,
					colorStop: 0
				},
				area: {
					opacity: 0.2,
					gradient: false
				},
				line: {
					width: 2
				}
			},
			tooltip: {
				showBox: true,
				showArrow: true,
				showCategory: false,
				borderWidth: 0,
				borderRadius: 0,
				borderColor: "#000000",
				borderOpacity: 0.7,
				bgColor: "#000000",
				bgOpacity: 0.7,
				gridType: "solid",
				dashLength: 4,
				gridColor: "#CCCCCC",
				boxPadding: 3,
				fontSize: 13,
				lineHeight: 20,
				fontColor: "#FFFFFF",
				legendShow: true,
				legendShape: "auto",
				splitLine: true,
				horizentalLine: false,
				xAxisLabel: false,
				yAxisLabel: false,
				labelBgColor: "#FFFFFF",
				labelBgOpacity: 0.7,
				labelFontColor: "#666666"
			},
			markLine: {
				type: "solid",
				dashLength: 4,
				data: []
			}
		}
	})


	//X轴数组
	let xAxisArray = ref([])
	//达成数组
	const achievementArray = ref([])
	//达成率数组
	const reachRateArray = ref([])

	let getServerData = () => {

		phoneStaGetStaffDataTrend('/phoneSta/getStaffDataTrend', {
			year: selectValue.value
		}).then((res) => {
			if (res.code == 200) {
				xAxisArray.value = []
				achievementArray.value = []
				reachRateArray.value = []

				//记录业绩最大值（主要是设置柱状图Y轴的最大值）
				let achievementArrayMax = ref(0)
				for (let i = 0; i < res.data.length; i++) {
					xAxisArray.value.push(res.data[i].month)
					achievementArray.value.push(res.data[i].achievement)
					reachRateArray.value.push(res.data[i].reachRate)
					if (achievementArrayMax.value < res.data[i].achievement) {
						achievementArrayMax.value = res.data[i].achievement
					}

				}
				opts.yAxis.data[1].max = achievementArrayMax.value * 1.2

				let result = {
					categories: xAxisArray.value,
					series: [

						{
							name: "业绩",
							index: 1,
							type: "column",
							data: achievementArray.value
						},

						{
							name: "达成率",
							type: "line",
							style: "curve",
							color: "#1890ff",

							data: reachRateArray.value,
							format: 'decimalToPercentage'
						},


					]
				};
				chartData.value = JSON.parse(JSON.stringify(result));
			}
		})
		
	}

	// onMounted(() => {
	// 	getServerData()
	// })
	onShow(()=>{
		//年份复原
		// 创建一个表示当前时间的Date对象
		const currentDate = new Date();
		// 获取当前年份（四位数）
		const currentYear = currentDate.getFullYear();
		
		selectValue.value = currentYear
		
		//图表数据复原
		getServerData()
	})
</script>

<style scoped lang="scss">
	.chartsBox {
		width: 688rpx;
		// height: 515rpx;
		padding: 18rpx;
		background: white;
		margin: 14rpx 0;

		.chartsTitle {
			width: 100%;
			height: 46rpx;
			margin-bottom: 14rpx;
		}



		.uniDataSelect {
			margin-bottom: 14rpx;
		}

		.chartsMain {
			width: 100%;
			height: 366rpx;

			// background-color: #bfa;
			/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
			.charts-box {
				width: 100%;
				height: 100%;
			}

		}
	}
</style>